<template>
    <div>
        <navs></navs>
        <div class="musicdetal-wrap" v-for="(item) in musicdsLs">
            <p>{{item.titles}}</p>
            <audio controls autoplay :src="'//s3plus.sankuai.com/v1/mss_9aef3311e3e3468e904d2614303ee784/music/'+musicp"></audio>
            <pre> {{item.names}} </pre>
        </div>
        <footers></footers>
    </div>
</template>

<script>
import navs from '../navHeard'
import footers from '../footer'
export default {
    name: 'Musicdetal',
    data() {
        return {
            musicdsLs:'',
            musicp:''
        };
    },
    components:{
        navs,
        footers
    },
    mounted() {
        
    },
    methods: {
        musicds(id){
            this.$http.get('/musicallDetal',{
                params:{
                    names:id
                }
            }).then(res=>{
                console.log(res.data.data);
                this.musicdsLs  = res.data.data
                let srcname = res.data.data[0].titles
                let srcp = res.data.data[0].names
                let alls = String(srcname+'-'+srcp.split(' ')[0].split('：')[1].trim()+'.mp3')
                this.musicp = alls
                console.log(alls);
            }).catch(err=>{
                console.log(err);
            })
        }
    },
    created(){
        let id = this.$route.query.id
        console.log(this.$route.query);
        // 通过id查找对应歌词
        this.musicds(id)
    }
};
</script>

<style lang="scss" scoped>
    .musicdetal-wrap{
        width: 1000px;
        min-height: 500px;
        /* background: rgb(91, 218, 235); */
        margin: 150px auto;
        >p{
            font-size: 25px;
            font-weight: bold;
            margin: 20px 0;
        }
        >pre{
            font-size: 25px;
            margin: 30px 0;
        }
    }
</style>